<template>
	<div class="splash">
		<img :src="imgUrl" mode="widthFix" />
		<div class="time">{{countDown}}s</div>
		<div class="skip" v-if="showSkip" @click="skip">跳过广告</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				imgUrl: '', // 广告图片地址
				showSkip: false, // 是否显示跳过广告按钮
				countDown: 0, // 倒计时
				timer:''
			};
		},
		mounted() {
			this.showAd();
		},
		onUnload(){
			console.log('gghide',this.timer)
			clearInterval(this.timer);
		},
		methods: {
			showAd() {
				// todo：获取广告数据并设置广告图片地址
				this.imgUrl = "https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com:443/3s-bg.jpg"
				this.countDown = 3; // 设置倒计时时间
				this.startCountDown(); // 开始倒计时
				console.log("adstart")
			},
			startCountDown() {
				this.timer = setInterval(() => {
					if (this.countDown > 0) {
						this.countDown--;
						if (this.countDown <= 3) {
							this.showSkip = true; // 显示跳过广告按钮
						}
					} else {
						this.skip();
					}
				}, 1000);
			},
			skip() {
				// 跳过广告，进入应用
				console.log("outgg")
				uni.switchTab({
				    url: '/pages/home/home',
				  });
			},
		},
	}
</script>

<style lang="scss">
	.splash {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.splash img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.splash .time {
		position: absolute;
		top: 50px;
		left: 20px;
		font-size: 14px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 5px 10px;
		border-radius: 20px;
	}

	.splash .skip {
		position: absolute;
		bottom: 20px;
		right: 20px;
		font-size: 12px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 5px 10px;
		border-radius: 15px;
		cursor: pointer;
		z-index: 999;
	}
</style>